<template>
	<view>
		<cu-custom title="机构认证申请" ></cu-custom>
		<view class="bg-white">
			<view class="b-b-8 p-b-10" style="position: relative;">
				<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>机构名称</view>
				<input class="org-text f-14" placeholder="请输入机构名称,15字以内" maxlength="15" @input="descInput" 
                v-model="dataInfo"/>
				<text 
				                style="position: absolute;
								z-index: 99;
				                right: 30rpx;
								margin-top:-60rpx;
				                font-size:24rpx;
				                color: #999;">{{ start }}/15</text>
			
				<text class="text-ex f-12">如：新东方杭州天目山路校区、小天才少儿英语学校等</text>
			</view>
			<view class="b-b-8 p-b-10 p-t-10" >
				<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>请选择机构所在省份和城市</view>
				<view class="form-detail" style="border-bottom:1px solid #f8f8f8 ;">
					<view class="l-m-b l-m-l">
						<text class="f-w-n">地区</text>
					</view>
					<view class="l-m-b l-m-r ">
						<pickerAddress @change="changeadd" style="">
								{{addvalue}}
							</pickerAddress>
						<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
					</view>
				</view>
				<view class="form-detail" style="border-bottom:1px solid #f8f8f8 ;">
					<view class="l-m-b l-m-l">
						
						<text class="f-w-n">详细地址</text>
					</view>
					<view class="l-m-b l-m-r location-i">
						
						<input placeholder="如街区、门牌号、小区、乡镇、村等"/>
						<view class=""><uni-icons type="location" size="28" color="red" style="display: block; height: 35rpx; margin-top: -10px;"></uni-icons><text class="f-14">定位</text></view>
					</view>
				</view>
			</view>
			<view class="b-b-8 p-b-10 p-t-10" >
				<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>请上传机构营业执照</view>
				<view class="p-s-r m-l-15">
				<uni-file-picker  class="m-t-15 upload-img"
					v-model="imageValue"  
					file-mediatype="image"
					mode="grid"
					file-extname="png,jpg"
					:limit="1"
					
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					@select="select"
				/>
				<text class="p-s-a" style="margin-top: -30px; margin-left: 35px; font-weight: bold; color: #999;">上传照片</text>
				</view>
				</view>
				<view class="b-b-8 p-b-10 p-t-10" >
					<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>范例</view>
					<view class="flex" style=" width: 60%; margin: 15px 20%;">
						<view class="fan-li f-l" style="width: 44%; margin: 0 3%; height: 140px;  border: 1px solid #eee;"><image src="../../static/img/1.png" height="60px" mode="aspectFit"></image></view>
						<view class="fan-li f-l" style="width: 44%; margin: 0 3%; height: 140px;  border: 1px solid #eee;"><image src="../../static/img/1.png" height="60px" mode="aspectFit"></image></view>
					</view>
					
				</view>	
				<view class="b-b-8 p-b-10 p-t-10" >
					<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>请上传法人身份证正反面</view>
					<view class="p-15">
					<Rboy-upload-sfz :obverse-url="formData.obverseUrl" :reverse-url="formData.reverseUrl" @selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
					</view>
					</view>
				<view class="b-b-8 p-b-10 p-t-10" >
					<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>请上传本人与身份证合照</view>
					<view class="p-s-r m-l-15">
					<uni-file-picker  class="m-t-15 upload-img"
						v-model="imageValue"  
						file-mediatype="image"
						mode="grid"
						file-extname="png,jpg"
						:limit="1"
						
						@progress="progress" 
						@success="success" 
						@fail="fail" 
						@select="select"
					/>
					</view>
					
					</view>
					<view class="uni-form-item uni-column in-text b-t-n b-u-c m-15 m-t-30 c-l m-b-30" style="padding-bottom: 30px;">
						<button> 提交认证信息</button>
					</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	
// import regionPicker  from "@/components/region-picker/region-picker.vue"
import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	export default {
		components:{RboyUploadSfz,pickerAddress},
		
		data() {
			return {
				addvalue:"请选择地区",
				start: 0,
				dataInfo: '',
				imageValue:[],
				formData: {
				// 正面
				obverseUrl: "",
				// 反面
				reverseUrl: "",
				},
			}
		},
		methods: {
			descInput() {
						let txtVal = this.dataInfo.length;
						this.start = txtVal;
					},
					
				
					// 身份证
					// 上传
					sfz_chagne(e) {
					    if (e.name == "obverse") {
					        this.formData.obverseUrl = e.tempFilePath
					    } else if (e.name == "reverse") {
					        this.formData.reverseUrl = e.tempFilePath
					    }
					},
					// 删除
					del_btn(e) {
					    if (e.name == "obverse") {
					        this.formData.obverseUrl = ""
					    } else if (e.name == "reverse") {
					        this.formData.reverseUrl = ""
					    }
					},
					changeadd(data) {
									this.addvalue = data.data.join('')
								}
					
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
input.org-text{ background: #f5f5f5; width: 96%; margin: 5px 2%; height: 45px; line-height: 45px;  padding-left: 10px; border-radius: 3px;}
.text-ex{width: 96%; margin: 5px 2%; height: 45px; color: #999; }
.form-detail{ height: 60px; line-height: 60px;
input{ text-align: right; height: 50px; line-height: 50px;}
}
.form-detail{ background: #fff; font-size: 32rpx;  }
.l-m-b{ display: flex; 
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
}
.img-s{ height: 35px; width: 35px;}
.l-m-l{ float: left; padding-left: 35rpx; font-weight: bold;}
.l-m-r{ float: right; padding-right: 35rpx;  text-align: right; display: ;}
.location-i{
	width: 70%;
	input{ margin-top: 0; padding-top: 0; height: 60px; line-height:60px; width: 100%; font-size: 14px; margin-right: 10px;}
}
.file-title{
	span{ text-align: center;}
}
.file-count{ display: none !important;}
.upload-img{ 
.is-add{padding-bottom: 20px;}
}
.fan-li{
	image{ height: 140px;}
	}
</style>
